<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
    <style>
        *{
               margin: 0;
               padding: 0;
               box-sizing: border-box;
           }
           .clearfix::after{
               content: '';
               display: block;
               height: 0;
               overflow: hidden;
               visibility: hidden;
               clear: both;
           }
           .clearfix{
               *zoom: 1;
           }
           .bg{
                background: aliceblue;
           }
           .gap{
               margin-top: 10px;
           }
           .container{
                display: flex;
                position: relative;
                height: 100%;
                padding: 100px 0 10px; 
                overflow: hidden;
           }
           .title {
               position: absolute;
               top: 10px;
               /* left: 10px; */
               padding:0 10px;
               width: 100%;
               height: 80px;
               text-align: center;
               
           }
           .title .sum{
            color: #0571DE;
            font-size: 32px;
           }
           .float{
               padding: 10px;
           }
           .left, .right{
               flex: 1;
               height: 100%;
           }
           .center{
               position: relative;
               flex: 2;
               height: 100%;
           }
       </style>
</head>

<body style="height: 100%; margin: 0">

    <div class="container clearfix">
        <div class="title bg">
            <div class="sum">总放款金额: 9874569821365 万元</div>
            <div class="added">新增放款：54698746万元</div>
        </div>
        <div class="left float">
            <div id="map" class="bg" style='width: 100%;height: 50%;'></div>
            <div id="pieChart" class="bg gap" style='width: 100%;height: 50%;'></div>
        </div>
        <div class="center float ">
            <div id="barChart" class="bg" style="width: 100%; height: 70%;"></div>
            <div id="lineChart" class="bg gap" style='width: 100%;height: 30%;'></div>
        </div>
        <div class="right float ">
            <div id="overlayChart" class="bg" style='width: 100%;height: 50%;'></div>
            <div id="raddarChart" class="bg gap" style='width: 100%;height: 50%;'></div>
        </div>
    </div>
    <script>
        var color = [
            '#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80',
            '#8d98b3', '#e5cf0d', '#97b552', '#95706d', '#dc69aa',
            '#07a2a4', '#9a7fd1', '#588dd5', '#f5994e', '#c05050',
            '#59678c', '#c9ab00', '#7eb00a', '#6f5553', '#c14089'
        ]
    </script>

    <script type="text/javascript" src="./lib/echarts.min.js"></script>
    <script type="text/javascript" src="./lib/gl.js"></script>
    <!-- <script type="text/javascript" src="china.js"></script>
    <script type="text/javascript" src="henan.js"></script>
    <script type="text/javascript" src="./BarChart.js"></script>
    <script type="text/javascript" src="./LineChart.js"></script>
    <script type="text/javascript" src="./PieChart.js"></script>
    <script type="text/javascript" src="./Overlay.js"></script>
    <script type="text/javascript" src="./RaddarChart.js"></script> -->
    <script type="text/javascript" src="./GLbar.js"></script>
    <script type="text/javascript" src="./Order.js"></script>
    <script type="text/javascript" src="./Circle.js"></script>
    <script type="text/javascript" src="./Radar2.js"></script>
    <script type="text/javascript" src="./heat.js"></script>
    <script type="text/javascript" src="./Bar2.js"></script>

    <script type="text/javascript">


    </script>
</body>

</html>